<script setup lang="ts">
import { watch } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
import { useConfigStore } from './store/config'
const store = useConfigStore()
const arcoLocales: any = {
  'zh': zhCN,
  'en': enUS,
};
const { locale, t } = useI18n()
const updateTitle = () => {
  let hash = window.location.hash.replace(/^#\//, '');
  let title = t("title")
  if (hash === "setting") {
    title = t("setting.setting")
  } else if (hash == 'extension') {
    const params = new URLSearchParams(window.location.search);
    title = t(`${params.get("name")}.title`)
  }
  document.title = title
  let eml: any = document.querySelector(".cet-title")
  if (eml) {
    eml.innerText = title
  }
}
watch(() => store.loading, () => {
  updateTitle()
})
const isDark = useDark({
  selector: 'body',
  attribute: 'arco-theme',
  valueDark: 'dark',
  valueLight: 'light',
})
const toggleDark = useToggle(isDark)
window.ipcRenderer.on("config", (_: any, value: any) => {
  if (value.theme !== undefined) {
    toggleDark(value.theme === 'dark')
  }
  if (value.locale !== undefined) {
    locale.value = value.locale;
    updateTitle();
  }
})
</script>

<template>
  <a-config-provider :locale="arcoLocales[store.locale]" size="small">
    <div v-show="!store.loading" class="fixed w-full content-h">
      <router-view />
    </div>
  </a-config-provider>
</template>

<style scoped></style>
